<!DOCTYPE HTML>
<html>
<head>
	<title>约个课</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link href="css/style.css" rel="stylesheet" type="text/css"  media="all" />
	<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
	<link href="css/slider.css" rel="stylesheet" type="text/css"  media="all" />
	<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
	<script type="text/javascript" src="js/jquery.nivo.slider.js"></script>
	<script type="text/javascript">
        $(window).load(function() {
            var path = "/" + location.pathname.split("/")[1];
            $.post(path+"/S_getImage",function (data) {
                console.log(data);
                $.each(data,function (i,li) {
                    console.log(li.imagePath);
                    $("#slider").append(
                        '<img src="'+path+"/"+li.imagePath+'" data-thumb="'+path+"/"+li.imagePath+'"  alt="" />'
                    );
                });
                $('#slider').nivoSlider();
            },'json');
            var club;
            /*获取所有的店铺*/
            $.get(path+"/S_getClub",function (date) {
                console.log(date);
                club=date;
                var id=date[0].clubId;
                $.each(date,function (i,obj) {
                    $("#clubselect").append(
                        '<option value="'+i+'">'+obj.clubName+'</option>'
                    );
                });
                $.each(date[0].shopSet,function (i,obj) {
                    $("#shopselect").append(
                        '<option value="'+obj.shopid+'">'+obj.shopname+'</option>'
                    );
                });
                if(!$("#shopselect").find("option:selected").text()=="") {
                    getcourse(date[0].shopSet[0].shopid);
                }
            },"json");
            $("#clubselect").change(function () {
                $("#course").empty();
                $("#shopselect").empty();
                $.each(club[this.value].shopSet,function (i,obj) {
                    $("#shopselect").append(
                        '<option value="'+obj.shopid+'">'+obj.shopname+'</option>'
                    );
                });
                if(!$("#shopselect").find("option:selected").text()=="") {
                    getcourse(club[this.value].shopSet[0].shopid);
                }
            });
            /*分店改变的时候获取分店的id*/
            /*获取第一个总店中第一个分店的id*/
            $("#shopselect").change(function () {
                var shopid=this.value;
                console.log(shopid);
                $("#course").empty();
                getcourse(shopid);
            });
            function getcourse(id) {
                $.get(path+"/"+"S_getCourse?clubid="+id,function (date) {
                    console.log(date);
                    $.each(date,function (i,obj) {
                        if(obj.courseRemainNum==0){
                            $("#course").append(
                                '<div class="grid_1_of_3 images_1_of_3 top_grid" name="course"style="margin-top: 0px;margin-left: 0px;margin-right: 10px" >'+
                                '<h3><a href="#">'+obj.courseName+'</a></h3>'+
                                '<img src="'+obj.courseImg+'" alt=""style="width: 400px;height: 230px"/>'+
                                '<span>难度</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>'+obj.courseDifficulty+'</span><br>'+
                                '<span>教练</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>'+obj.courseTeacher+'</span><br>'+
                                '<span>日期</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>'+obj.courseDate+'</span><br>'+
                                '<span>时间</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>'+obj.courseTime+'</span><br>'+
                                '<span>可约</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>'+obj.courseRemainNum+'</span>'+
                                '<div class="button"><span><a href="">不可预约</a></span></div>'+
                                '</div>');
						}else {
                            $("#course").append(
                                '<div class="grid_1_of_3 images_1_of_3 top_grid" name="course"style="margin-top: 0px;margin-left: 0px;margin-right: 10px" >'+
                                '<h3><a href="aboutCourse.html?courseId='+obj.courseId+"&clubid="+id+'">'+obj.courseName+'</a></h3>'+
                                '<img src="'+obj.courseImg+'" alt=""style="width: 400px;height: 230px"/>'+
                                '<span>难度</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>'+obj.courseDifficulty+'</span><br>'+
                                '<span>教练</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>'+obj.courseTeacher+'</span><br>'+
                                '<span>日期</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>'+obj.courseDate+'</span><br>'+
                                '<span>时间</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>'+obj.courseTime+'</span><br>'+
                                '<span>可约</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>'+obj.courseRemainNum+'</span>'+
                                '<div class="button"><span><a href="aboutCourse.html?courseId='+obj.courseId+"&clubid="+id+'">预约</a></span></div>'+
                                '</div>');
						}
                    });
                },"json");
            };
            $("#selectinfo").click(function () {
				var date=$("#date").val();
				console.log(date);
				var time=$("#timeselect").val();
				console.log(time);
				var difficult=$("#difficlutselect").val();
				console.log(difficult);
				var club=$("#shoopselect").val();
				console.log(club);
				/*发送请求  获取对应的课程信息*/
                $.get(path+"/"+"S_getCourseBySelect?club="+club+"&date="+date+"&time="+time+"&difficult="+difficult,function (date) {
                    console.log(date);
                    $("#course").empty();
                    $.each(date,function (i,obj) {
                        if(obj.courseRemainNum==0){
                            $("#course").append(
                                '<div class="grid_1_of_3 images_1_of_3 top_grid" name="course"style="margin-top: 0px;margin-left: 0px;margin-right: 10px" >'+
                                '<h3><a href="#">'+obj.courseName+'</a></h3>'+
                                '<img src="'+obj.courseImg+'" alt=""style="width: 400px;height: 230px"/>'+
                                '<span>难度</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>'+obj.courseDifficulty+'</span><br>'+
                                '<span>教练</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>'+obj.courseTeacher+'</span><br>'+
                                '<span>日期</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>'+obj.courseDate+'</span><br>'+
                                '<span>时间</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>'+obj.courseTime+'</span><br>'+
                                '<span>可约</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>'+obj.courseRemainNum+'</span>'+
                                '<div class="button"><span><a href="#">不可预约</a></span></div>'+
                                '</div>');
                        }else{
                            $("#course").append(
                                '<div class="grid_1_of_3 images_1_of_3 top_grid" name="course"style="margin-top: 0px;margin-left: 0px;margin-right: 10px" >'+
                                '<h3><a href="aboutCourse.html?courseId='+obj.courseId+"&clubid="+club+'">'+obj.courseName+'</a></h3>'+
                                '<img src="'+obj.courseImg+'" alt=""style="width: 400px;height: 230px"/>'+
                                '<span>难度</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>'+obj.courseDifficulty+'</span><br>'+
                                '<span>教练</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>'+obj.courseTeacher+'</span><br>'+
                                '<span>日期</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>'+obj.courseDate+'</span><br>'+
                                '<span>时间</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>'+obj.courseTime+'</span><br>'+
                                '<span>可约</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>'+obj.courseRemainNum+'</span>'+
                                '<div class="button"><span><a href="aboutCourse.html?courseId='+obj.courseId+"&clubid="+club+'">预约</a></span></div>'+
                                '</div>');
                        }
                    });
                },"json");
            });
            //得到当前时间
            var date_now = new Date();
            //得到当前年份
            var year = date_now.getFullYear();
            //得到当前月份
            //注：
            //  1：js中获取Date中的month时，会比当前月份少一个月，所以这里需要先加一
            //  2: 判断当前月份是否小于10，如果小于，那么就在月份的前面加一个 '0' ， 如果大于，就显示当前月份
            var month = date_now.getMonth()+1 < 10 ? "0"+(date_now.getMonth()+1) : (date_now.getMonth()+1);
            //得到当前日子（多少号）
            var date = date_now.getDate() < 10 ? "0"+date_now.getDate() : date_now.getDate();
            //设置input标签的max属性
            $("#date").attr("min",year+"-"+month+"-"+date);
        });
	</script>
</head>
<body>
<!----start-header----->
<!---start-top-nav---->
<div class="header">
	<div class="wrap">
		<!---start-top-nav---->
		<div class="top-header">
			<div class="logo">
				<span style="color: pink">总店</span>
				<select id="clubselect" style="height: 24px">
				</select>
				<span style="color: pink">分店</span>
				<select id="shopselect" style="height: 24px">
				</select>
				<p style="width: 480px;display: inline-block"></p>
				<input type="date" class="form-control" placeholder="请输入出生年月" name="UserInfoFormMap.birthday" id="date" value="" max="2018-6-28">
				<select id="timeselect" style="height: 24px">
					<option>请选择时间</option>
					<option>8:00-9:30</option>
					<option>10:00-11:30</option>
					<option>14:00-15:30</option>
					<option>16:00-17:50</option>
					<option>19:00-20:30</option>
				</select>
				<select id="difficlutselect" style="height: 24px">
					<option>请选择难度</option>
					<option>1</option>
					<option>2</option>
					<option>3</option>
					<option>4</option>
					<option>5</option>
				</select>
				<button style="background-color: #e4b9c0" id="selectinfo">查询</button>
			</div>
			<div class="clear"> </div>
		</div>
		<!---start-top-nav---->
		<div class="top-nav">
			<div class="top-nav-left">
				<ul>
					<li><a href="person.html">个人信息</a></li>
					<li class="active"><a href="index.html">约个课</a></li>
					<li><a href="personal.html">约私教</a></li>
					<li><a href="info.html">预约信息</a></li>
					<li><a href="club.html">场馆信息</a></li>
					<li><a href="vipcard.html">我的会员卡</a></li>
					<div class="clear"> </div>
				</ul>
			</div>
			<div class="top-nav-right">
				<div class="telephone">
					<span><i class="phone_img"><img src="images/phone.png" alt="" /></i> CALL</span><span class="number">(800) 234-5678</span>
				</div>
			</div>
			<div class="clear"> </div>
		</div>
		<!---End-top-nav---->
	</div>
</div>
<!----End-header----->
<!------ Slider ------------>
<div class="slider">
	<div class="slider-wrapper theme-default">
		<div id="slider" class="nivoSlider">
		</div>
	</div>
</div>
<!------End Slider ------------>
<!---start-content---->
<div class="wrap">
	<div class="content">
		<div class="top-grids">
			<div class="section group" id="course">
				<!--<div class="grid_1_of_3 images_1_of_3 top_grid" style="margin-top: 0px;margin-left: 0px;margin-right: 10px">
                    <h3><a href="aboutCourse.html">课程名</a></h3>
                      <img src="images/welcome_img2.jpg" alt="" />
                      <p>豪情在天谁能与我争锋<br>青锋在手谁能倚天屠龙<br>中原逐鹿方显英雄本色<br>武林风起自当气吞山河</p>
                      <span>难度</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>五星</span><br>
                      <span>教练</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>RNG</span><br>
                      <span>时间</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>10:00-11:00</span><br>
                      <span>可约</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>3人</span>
                    <div class="button"><span><a href="about.html">预约</a></span></div>
                </div>-->
			</div>
		</div>

	</div>
	<!---End-content---->
</body>
</html>

